<template>
  <div>
    <van-nav-bar
      :title="title? '个人资料': '修改个人资料'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="my-logo">
      <img src="../../../assets/logo.png" alt="" />
      <span class="username">{{ $store.state.uname }}</span>
      <span class="jf">
        <van-icon style="color: #000; font-size: 16px" name="location-o" />
        地址:重庆市九龙坡区大三街道1号
      </span>
    </div>
    <h2 style="padding: 15px; border-bottom: 1px solid gray">资料</h2>
    
    <ul class="personal-data">
      <li>
        <span>真实姓名:</span>
        <span v-show="!show">{{user_name}}</span>
        <input  v-show="show" type="text"   placeholder="请填写真实姓名" v-model="user_name" />
      </li>
      <li>
        <span>邮箱地址:</span>
        <span v-show="!show">{{email}}</span>
        <div  v-show="show">
          <input  type="text"  placeholder="请填写邮箱地址"  @blur="checkUemail" v-model="email" />
          <p id="email_message" class="message"></p>
        </div>
        
      </li>
      <li>
        <span>性别:</span>
        <span v-show="!show">{{sex == 1 ? "小哥哥" : '小姐姐'}}</span>
        <van-radio-group v-model="sex" direction="horizontal" v-show="show">
          <van-radio name="1" checked-color="#BEB4B3">小哥哥</van-radio>
          <van-radio name="2" checked-color="#BEB4B3">小姐姐</van-radio>
        </van-radio-group>
      </li>
      <li>
        <span>出生日期:</span>
        <span v-show="!show">{{birthday}}</span>
        <div v-show="show" style="width: 47.8%;">
          <van-field v-model="birthday" placeholder="选择的日期结果" readonly @click="showDate = true"  style="width: 100%;"/>
          <van-popup v-model="showDate" position="bottom" :style="{ height: '40%' }" >
            <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()"/>
          </van-popup>
        </div>
      </li>
    
      <li>
        <span>联系电话:</span>
        <span v-show="!show">{{phone}}</span>
        <div v-show="show">
          <input  type="text" placeholder="请填写联系电话" v-model="phone" @blur="checkPhone" />
          <p id="phone_message" class="message"></p>
        </div>
       
      </li>
      <li>
        <span>QQ:</span>
        <span v-show="!show">{{qq}}</span>
        <input  v-show="show" type="text"   placeholder="请填写QQ" v-model="qq" />
      </li>
    </ul>
    <br>
    <van-button
      v-if="title"
      type="primary"
      color="#BBAFAF"
      size="large"
      block
      @click="definePerson"
      >修改个人资料</van-button
    >
    <van-button
      v-else
      type="primary"
      color="#BBAFAF"
      size="large"
      block
      @click="revisePerson"
      >确定修改</van-button
    >
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  data() {
    return {
      title: true,
      user_name:'',
      email:'',
      sex: '1',
      birthday:'' ,
      phone:'',
      qq:'',
      show:false,
      showDate: false,
      currentDate:new Date(),
      minDate: new Date(1888, 0, 1),
      changeDate: new Date(),
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/means");
    },
    // 时间
    showPopup() {
      this.showDate = true;
    },
    changeFn() { // 值变化是触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() { // 确定按钮
      this.birthday = this.timeFormat(this.currentDate);
      this.showDate = false;
    },
    cancelFn(){
      this.showDate = true;
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日'
    },
    // 邮箱格式验证
    checkUemail() {
      let exp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      if(this.email !== null ){
         if (exp.test(this.email)) {
          // email_message.innerHTML = "邮箱通过";
          // email_message.style.color = "green";
          return true;
        } else {
          email_message.innerHTML = "请输入正确格式邮箱名";
          email_message.style.color = "red";
          return false;
        }
      }else{
          return true;
      }
    },
    // 电话验证
    checkPhone(){
      let p = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(this.phone !== null){
        if (p.test(this.phone)) {
          // email_message.innerHTML = "邮箱通过";
          // email_message.style.color = "green";
          return true;
        } else {
          phone_message.innerHTML = "请输入正确电话格式";
          phone_message.style.color = "red";
          return false;
        }
      }else{
        return true;
      }
    
    },
    // 确定修改
    revisePerson(){
      if( this.checkUemail() && this.checkPhone() ){
        let params = `email=${this.email}&phone=${this.phone}&user_name=${this.user_name}&qq=${this.qq}&birthday=${this.birthday}&sex=${this.sex}&uid=${this.$store.state.uid}`;
        // console.log(params);
        this.axios.post("/mydata/revise", params).then((res) => {
          console.log("修改个人信息",res);
          if(res.data.code === 200){
            Notify({ type: 'success', message: '修改成功' });
            this.title = true
            this.show = false
          }else{
            Notify({ type: 'warning', message: '修改失败' });
          }
        }); 
      }else{
        Notify({ type: 'warning', message: '修改失败' });
      }
      
    },
    // 修改
    definePerson(){
      this.title = false
      this.show = true 
    }

  },
  mounted(){
    this.timeFormat(new Date());
    let params= `uid=${this.$store.state.uid}`
      this.axios.post("/mydata", params).then((res) => {
          console.log("个人信息",res);
          let datas = res.data.results[0]
          this.user_name = datas.user_name
          this.email = datas.email
          this.sex = datas.sex
          this.birthday = datas.birthday
          this.phone = datas.phone
          this.qq = datas.qq
      }); 
    
  }
};
</script>

<style scoped>
/* ::v-deep .van-nav-bar__text {
  color: #000;
}
::v-deep .van-icon {
  color: #000;
} */
</style>

<style lang="scss" scoped>
.my-logo {
  height: 30vw;
  padding: 20px 0;
  background-image: url("@/assets/img/denglubeijing.jpg");
  img {
    display: block;
    // width: 50px;
    height: 50px;
    margin: 00px auto;
    border: 1px solid #000;
    border-radius: 50%;
  }
  span {
    display: block;
    text-align: center;
    margin: 15px 0 0 0;
  }
  .username {
    font-size: 20px;
  }
}

.personal-data {
  // padding: 0 10px;
  font-size: 20px;
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid gray;
    padding: 15px 10px 15px 10px;
    input {
      flex: 1;
      text-align: right;
      border: none;
      background: #f5f5f5;
    }
    p{
      flex: 1;
      text-align: right;
      border: none;
    }
  }
}
::v-deep .van-cell {
  background-color:#F5F5F5 ;
  font-size: 20px;
}
::v-deep .van-field__control{
  font-size: 20px;
}
</style>
